import TrafficLight from "@/components/trafficLight.vue";
import ToolTip from "@/components/ToolTip.vue";
import Message from "@/components/Message.vue";
import DynamicTags from "@/components/DynamicTags.vue";
import Collapse from "@/components/Collapse/index.vue";
import Calendar from "@/components/Calendar.vue";
import Slider from "@/components/Slider.vue";
import InfiniteScroll from "@/components/InfiniteScroll.vue";
// import StarrySky from "@/components/StarrySky.vue";
import Todo from "@/components/Todo.vue";
import CustomDirective from "@/components/customDirective.vue";
import Carousel, { type listItem } from "@/components/Carousel.vue";
import progressBar from "@/components/progressBar.vue";
import VirtualList from "@/components/VirtualList.vue";

export const lightList = [
  {
    color: "#d02620",
    time: 10,
  },
  {
    color: "#fbdb03",
    time: 2,
  },
  {
    color: "#6ab52c",
    time: 8,
  },
];
const imgList: listItem[] = [
  {
    id: 1,
    img: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg",
  },
  {
    id: 2,
    img: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg",
  },
  {
    id: 3,
    img: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg",
  },
];
const nextImg = (v: number) => {
  console.log(v, "下一张");
};
const changeIndex = (v: number) => {};
function closeMeg(v: any) {
  console.log(v, "closeMeg");
}

export type modelType = {
  label: string;
  com: Object;
  props?: Object;
  method1?: methodType;
  method2?: methodType;
  method3?: methodType;
};
type methodType = {
  name: string;
  event: Function;
};

const modules: modelType[] = [
  {
    label: "TrafficLight",
    com: TrafficLight,
    props: { lightList },
  },
  {
    label: "ToolTip",
    com: ToolTip,
  },
  {
    label: "Message",
    com: Message,
    props: {
      content: "This is a message",
    },
    method1: {
      name: "close",
      event: closeMeg,
    },
  },
  {
    label: "Carousel",
    com: Carousel,
    props: {
      list: imgList,
      autoplay: true,
      interval: 3,
      showDots: true,
    },
    method1: {
      name: "next",
      event: nextImg,
    },
    method2: {
      name: "update:value",
      event: changeIndex,
    },
  },
  {
    label: "DynamicTags",
    com: DynamicTags,
  },
  {
    label: "Collapse",
    com: Collapse,
  },
  {
    label: "Calendar",
    com: Calendar,
  },

  {
    label: "Slider",
    com: Slider,
  },
  {
    label: "InfiniteScroll",
    com: InfiniteScroll,
  },

  {
    label: "等待开发",
    com: Todo,
  },

  {
    label: "Custom Directives自定义指令",
    com: CustomDirective,
  },
  {
    label: "progressBar进度条",
    com: progressBar,
  },
  {
    label: "虚拟列表",
    com: VirtualList,
  },
];

export default modules;
